<template>
    <div
        style="width: 100%;padding-bottom: 2rem; background-color: #f2f2f2; display: flex;flex-direction: column;justify-content: start;align-items: center;">
        <div
            style="width: 95%; display: flex; flex-direction: column; justify-content: start; align-items: center;margin-top: 2rem; background-color: white;">
            <el-form :model="form" label-width="120px" style="width: 95%; margin-top: 5rem;">
                <el-form-item label="微信公众号配置" style="width: 500px;">
                </el-form-item>
                <el-divider class="checkbox-divider" content-position="left"></el-divider>
                <el-divider class="checkbox-divider" content-position="left" style="opacity: 0;"></el-divider>
                <el-form-item label="公众号名称:" style="width: 500px;">
                    <el-input v-model="form.name" placeholder="请输入公众号名称" />
                </el-form-item>
                <el-form-item label="公众号原始id:" style="width: 500px;">
                    <el-input v-model="form.name" placeholder="请输入公众号id" />
                </el-form-item>
                <el-form-item label="AppID:" style="width: 500px;">
                    <el-input v-model="form.name" placeholder="请输入公众号AppID" />
                </el-form-item>
                <el-form-item label="Token:" style="width: 500px;">
                    <el-input v-model="form.name" placeholder="请输入公众号Token" />
                </el-form-item>
                <el-form-item label="AppSecret:" style="width: 500px;">
                    <el-input v-model="form.name" placeholder="请输入公众号AppSecret" />
                </el-form-item>
                <el-form-item label="微信支付配置" style="width: 500px;">
                </el-form-item>
                <el-divider class="checkbox-divider" content-position="left"></el-divider>
                <el-divider class="checkbox-divider" content-position="left" style="opacity: 0;"></el-divider>
                <el-form-item label="微信商户号:" style="width: 500px;">
                    <el-input v-model="form.name" placeholder="请输入微信商户号" />
                </el-form-item>
                <el-form-item label="签名类型:" style="width: 500px;">
                    <el-select v-model="form.region" style="width: 500px;">
                        <el-option label="MD5" value="MD5" />
                        <el-option label="MD6" value="MD6" />
                    </el-select>
                </el-form-item>
                <el-form-item label="秘钥:" style="width: 500px;">
                    <el-input v-model="form.name" placeholder="请输入公众号AppSecret" />
                </el-form-item>
                <el-form-item label="证书:" style="width: 500px;">
                    <div>
                        <bigFile></bigFile>
                    </div>
                </el-form-item>
                <el-form-item label="支付授权目录:" style="width: 500px;">
                    <el-input v-model="form.name" value="aaaa" disabled />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" style="margin: auto;">保存</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

<script setup lang="ts">
import bigFile from './UserManage/upLoad.vue'
import router from '@/router';
import { ref, reactive } from 'vue'
import type { UploadInstance } from 'element-plus'
const uploadRef = ref<UploadInstance>()
const form: any = reactive({

})
const onSubmit = () => {

}

</script>

<style scoped lang="less">
.firstItem {
    margin-right: 0px;
    border: none;
}

.admin-header {
    width: 95%;
    margin-top: 1rem;
    display: flex;
    flex-direction: row-reverse;
}

.checkbox-divider {
    flex-basis: 100%;
    width: 100%;
    margin: 10px 0;
}
</style>